import React from 'react';
import { ProductListC, PrimaryC } from '../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { message } from 'antd';

class ProductListDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      init: undefined,
      init1: undefined,
    };

    setTimeout(() => {
      this.setState({
        init: '208965756b642369016b642591380000',
        init1: ['06e8f5467ec34498932717d814cc6c60', '076a56ba7e2d4334a9f4b134f935f95b'],
      });
    }, 3000);
  }

  onClick = () => {
    this.state.ProductListC1.setSelect(['208965756b642369016b642591380000', '15b66ea2ce2f4123a2f2c7554632920b', '167c853944774a7e907231575673514d']);
  };
  onClick1 = () => {
    this.state.ProductListC2.setSelect(['05269c087b314eec9cc55a951cdbc6ba', '06718e94e07e43be828ba7c075b7d473', '06e8f5467ec34498932717d814cc6c60']);
  };
  onClick3 = () => {
    this.state.ProductListC3.setSelect('208965756b642369016b642591380000');
  };
  render() {
    return (
      <div style={{ padding: '20px', width: '800px' }}>
        <h2>单选，有初始化，数据源为组合根节点</h2>
        <ProductListC
          form={this.props.form}
          dataIndex='productId3'
          // initialValue={this.state.init}
          initialValue='208965756b642369016b642591380000'
          rules={[{ required: true, message: '请选择产品!' }]}
          helper='lalal'
          onRef={(ref) => this.setState({ ProductListC3: ref })}
          onChange={(e) => console.log(e)}
        />
        <PrimaryC onClick={this.onClick3} title='更换数据' />
        <ProductListC
          form={this.props.form}
          dataIndex='productId31'
          initialValue={this.state.init}
          // initialValue='208965756b642369016b642591380000'
          rules={[{ required: true, message: '请选择产品!' }]}
          helper='lalal'
          onChange={(e) => console.log(e)}
        />
        <h2>多选，有初始化，数据源为组合根节点，可外部更改数据</h2>
        <ProductListC
          form={this.props.form}
          dataIndex='productId4'
          initialValue={this.state.init}
          rules={[{ required: true, message: '请选择产品!' }]}
          helper='lalal'
          onChange={(e) => console.log(e)}
          onRef={(ref) => this.setState({ ProductListC1: ref })}
          multiple={true}
        />
        <PrimaryC onClick={this.onClick} title='玄武三号' />
        <h2>单选，数据源为产品节点</h2>
        <ProductListC form={this.props.form} dataIndex='productId5' rules={[{ required: true, message: '请选择产品!' }]} onChange={(e) => console.log(e)} dataType={2} />
        <h2>多选，有初始化，数据源为产品节点，可外部更改数据</h2>
        <ProductListC
          form={this.props.form}
          dataIndex='productId6'
          initialValue={this.state.init1}
          onChange={(e) => console.log(e)}
          onRef={(ref) => this.setState({ ProductListC2: ref })}
          multiple={true}
          dataType={2}
        />
        <PrimaryC onClick={this.onClick1} title='玄武三号' />
        <h2>单选，数据源为产品节点，用于资产拆分，后台返回资产拆分中不包含的产品</h2>
        <ProductListC form={this.props.form} dataIndex='productId7' onChange={(e) => console.log(e)} dataType={3} />
        <h2>选择框隐藏时触发事件</h2>
        <ProductListC form={this.props.form} dataIndex='productId8' onDropdownVisibleChange={(open, value) => message.warning('已选项发生变化')} dataType={2} multiple={true} />
        <h2>单选，数据源为投资经理权限产品</h2>
        <ProductListC form={this.props.form} dataIndex='productId99' rules={[{ required: true, message: '请选择产品!' }]} onChange={(e) => console.log(e)} dataType={4} />
        <h2>单选，数据源为投资经理权限产品加模拟产品</h2>
        <ProductListC form={this.props.form} dataIndex='productId999' rules={[{ required: true, message: '请选择产品!' }]} onChange={(e) => console.log(e)} dataType={5} />
        <h2>单选，数据源为投资经理权限产品加模拟产品(设置交易模式)</h2>
        <ProductListC
          form={this.props.form}
          dataIndex='productId999'
          rules={[{ required: true, message: '请选择产品!' }]}
          onChange={(e) => console.log(e)}
          dataType={5}
          tradeModel={['BOOKKEEPING_MODE', 'COMMAND_MODE', 'VALUATION_BOOKKEEPING_MODEL']}
        />
      </div>
    );
  }
}

export default Form.create()(ProductListDemo);
